<template>
  <div id="body">
    <van-Overlay
      z-index="4000"
      :show="infoShow"
      closeable
      close-icon-position="bottom-right"
      position="center"
      class="overlay"
    >
      <h3 style="margin: 5px 0; font-size: 0.7rem">{{ sellerData.name }}</h3>
      <van-rate
        v-model="value"
        :size="25"
        color="#ffd21e"
        void-icon="star"
        void-color="#eee"
        style="margin: 5px 0"
      />
      <p style="margin: 5px 0; font-size: 0.5rem">优惠信息</p>
      <p style="font-size: 0.3rem; width: 75%">
        <span
          style="display: inline-block; width: 10%; height: 30%; color: white"
          class="iconfont icon-hui"
        ></span
        >{{ sellerData.supports[0] }}
      </p>
      <p style="font-size: 0.3rem; width: 75%; color: white">
        <span
          style="display: inline-block; width: 10%; height: 30%; color: blue"
          class="iconfont icon-zhe"
        ></span
        >{{ sellerData.supports[1] }}
      </p>
      <p style="margin: 5px 0; font-size: 0.5rem">商家公告</p>
      <p
        style="
          font-size: 0.38rem;
          width: 75%;
          color: white;
          margin: 5px 0;
          color: rgba(244, 244, 244, 0.7);
        "
      >
        {{ sellerData.bulletin }}
      </p>
      <p @click="infoShow = false">×</p>
    </van-Overlay>
    <!-- 这里是你的HTML模板内容 -->
    <div class="bg_img">
      <div class="bg_blur"></div>
      <!-- 新增一个用于模糊背景的层 -->
      <div class="content">
        <img
          class="icon"
          style="border-radius: 10px"
          :src="`http://47.122.115.10:5000/${sellerData.avatar.slice(27)}`"
          alt=""
        />
        <div class="right" style="margin-left: 10px; z-index: 10; color: white">
          <h3 style="font-size: 0.6rem; margin: 0; margin-top: 0.3rem">
            {{ sellerData.name }}
          </h3>
          <p style="font-size: 0.3rem">{{ sellerData.description }}</p>
          <p style="font-size: 0.2667rem">
            {{ sellerData.supports[0] }}/{{ sellerData.supports[1] }}
          </p>
        </div>
      </div>
      <div class="clickBtn" style="z-index: 10" @click="infoShow = !infoShow">
        <span>{{ sellerData.supports.length }}个 ></span>
      </div>
      <van-notice-bar
        class="bulletin"
        style="
          z-index: 10;
          background-color: rgba(4, 4, 4, 0.6) !important;
          color: while;
        "
        left-icon="volume-o"
        mode="link"
        @click="infoShow = !infoShow"
        >{{ sellerData.bulletin }}</van-notice-bar
      >
    </div>
    <!-- <button @click="changeTheme('#FFF', 'rgb(30, 41, 59)')">切换模式</button> -->
    <!-- tab卡 -->
    <van-tabs v-model="tabActive" swipeable>
      <van-tab
        v-for="(item, index) in titArray"
        :key="index"
        :title="item.title"
      >
        <component :is="item.content"></component>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script lang="ts">
import axios from "axios";
import shopView from "@/components/shopView.vue";
import reviewView from "@/components/reviewView.vue";
import sellerView from "@/components/sellerView.vue";

export default {
  // 组件的data函数，返回一个对象，对象的属性绑定到模板中
  data() {
    return {
      // 组件的局部状态
      sellerData: null,

      infoShow: false,
      value: 4,
      tabActive: 0,
      titArray: [
        { title: "商品", content: shopView },
        { title: "评价", content: reviewView },
        { title: "商家", content: sellerView },
      ],
      activeKey: 0,
      mode: "day",
    };
  },

  // 计算属性，用于声明依赖于data的值
  computed: {
    // 计算属性示例
  },

  // 侦听器，用于监听data中的数据变化
  watch: {
    // 侦听器示例
    infoShow(newValue, oldValue) {
      console.log(newValue);
    },
  },

  // 生命周期钩子
  // 组件的方法
  methods: {
    // 方法示例
    fetchSellerData() {
      axios.get("http://47.122.115.10:5000/shop/seller").then((res) => {
        this.sellerData = res.data.data;
      });
    },
    // changeThemeBlack(color, bg) {
    //   console.log(color);

    //   document.documentElement.style.setProperty("--theme_bg_color", bg);
    //   document.documentElement.style.setProperty("--theme_text_color", color);
    // },
    // changeThemeWhile(color, bg) {
    //   document.documentElement.style.setProperty("--theme_bg_color", "");
    //   document.documentElement.style.setProperty("--theme_text_color", "");
    // },
    changeTheme(color, bg) {
      if (this.mode === "day") {
        // 设置夜晚模式的颜色
        document.documentElement.style.setProperty("--theme_bg_color", bg);
        document.documentElement.style.setProperty("--theme_text_color", color);
        this.mode = "night";
      } else if (this.mode === "night") {
        // 移除自定义设置，回到默认状态
        document.documentElement.style.removeProperty("--theme_bg_color");
        document.documentElement.style.removeProperty("--theme_text_color");
        this.mode = "day";
      }
    },
    // handleInfo() {
    //   this.infoShow = true;
    // },
  },
  mounted() {
    this.fetchSellerData();
  },
};
</script>
<style scoped lang="less">
/* 这里是你的CSS样式 */
#body {
  width: 100%;
  height: 100vh;
  overflow: hidden;
  .bg_img {
    display: flex;
    flex-direction: column;
    position: relative;
    width: 100%;
    height: 20%;
    overflow: hidden; /* 防止伪元素溢出 */
    background-image: url(../assets/images/bg.png);
    background-size: cover;

    .bg_blur {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background-position: center;
      background: rgba(4, 4, 4, 0.4);
      backdrop-filter: blur(4px);
      z-index: 1;
    }
    .content {
      width: 100%;
      height: 76%;
      display: flex;
      justify-content: center;
      align-items: center;
      .icon {
        position: relative;
        z-index: 2; /* 确保图标在模糊背景之上 */
        width: 17%;
      }
    }
    .clickBtn {
      position: absolute;
      display: flex;
      justify-content: center;
      align-items: center;
      right: 5%;
      top: 50%;
      width: 10%;
      height: 20%;
      background-color: rgba(4, 4, 4, 0.6);
      font-size: 0.3rem;
      color: white;
      border-radius: 13px;
      text-align: center;
    }
    .bulletin {
      flex: 1;
      background-color: rgba(4, 4, 4, 0.6);
      color: white;
    }
  }
}
.overlay {
  width: 100%;
  height: 100%;
  background-color: rgba(4, 4, 4, 0.7);
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: white;
}
.myBtnBlack {
  color: red;
  background: var(--theme_bg_color);
}
.myBtnWhile {
  color: red;
  background: var(--theme_bg_color);
}
</style>
